<template>
  <a-drawer
    title="更新预算"
    :visible="visible"
    placement="right"
    width="50%"
    :destroyOnClose="true"
    @close="handleCancel"
    :maskClosable="false"
    :headerStyle="{ background: '#fff', position: 'absolute', width: '100%', height: '52px', zIndex: 30 }"
    :bodyStyle="{ padding: '0px', background: '#fff' }"
    :footer="null"
    :footer-style="{ display: 'flex' }">
    <div class="content" style="margin-top:52px;width:100%;margin-bottom: 60px;padding: 20px;">
      <slot name="content">

        <table class="vtable">
          <thead>
            <div style="background-color: #e8e8e8;display: flex;">
              <div
                style="flex: 1;"
                v-for="(item, index) in headersSource"
                :key="index"
                :style="item.hidden ? 'display: none;' : ''">
                <th class="thead-th" v-if="index != 0" style="display: flex;">
                  <span v-if="index != 0" style="display: inline-block;flex: 1;">{{ item.name }}</span>
                </th>
              </div>
            </div>
          </thead>
          <tbody>
            <div v-for="(row, rowId) in newdataSource " :key="rowId">
              <tr style="display: flex;width: 100%;" v-if="newdataSource.length > 0 ? row.datas[0] : false">
                <template v-for="(it, itId) in row.datas">
                  <div v-if="headersSource[itId].hidden == false" style="flex: 1;">
                    <template v-if="!headersSource[itId].primary">
                      <div class="row-td" style="background-color: #fcfcfc;">{{ it }} </div>
                    </template>
                    <template v-else>
                      <a-input
                        class="row-td"
                        :value="it"
                        type="number"
                        @change="e => handleChange(e.target.value, rowId, itId)"
                        :disabled="false" />
                    </template>
                  </div>
                </template>
              </tr>
              <tr style="display: flex;width: 100%;" v-else>
                <template v-for="(it, itId) in row.datas">
                  <div v-if="headersSource[itId].hidden == false" style="flex: 1;">
                    <div class="row-td" style="background-color: #fcfcfc;">{{ it }}</div>
                    <!-- <a-input class="row-td" :value="it"
                                            @change="e => handleChange(e.target.value, rowId, itId)" :disabled="true" /> -->
                  </div>
                </template>
              </tr>
            </div>
          </tbody>
        </table>
      </slot>
    </div>
    <!-- <a-form :form="form">
                <a-form-item label="预算标题" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input placeholder="请输入预算标题" :max-length="100"
                        v-decorator="['title', { rules: [{ required: true, message: '请输入预算标题', trigger: 'blur' }] }]" />
                </a-form-item>
                <a-form-item label="描述" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-textarea :rows="4" v-model.trim="addForm.description" placeholder="请输入描述信息" :max-length="255" />
                </a-form-item>
            </a-form> -->

    <slot name="footer">
      <div class="footer" :style="{ 'display': footerFlag ? '' : 'none' }">
        <a-button key="back" @click="handleCancel" style="margin-right: 20px;">
          关闭
        </a-button>
        <a-button type="primary" style="margin-right: 40px;" :visible="visibleBtn" :loading="loadingBtn" @click="handleSubmit">
          保存
        </a-button>
      </div>
    </slot>
    <!-- <template slot="footer">
            <a-button key="back" @click="handleCancel">
                关闭
            </a-button>
            <a-button type="primary" :visible="visibleBtn" :loading="loadingBtn" @click="handleSubmit">
                保存
            </a-button>
        </template> -->
  </a-drawer>
</template>

<script>
import { addBudgets, editBudgets, detailBudgets } from '@/api/budget'

export default {
    data () {
        return {
            form: this.$form.createForm(this),
            visible: false,
            confirmLoading: false,
            loading: false,
            visibleBtn: false,
            loadingBtn: false,

            addForm: {
                title: '',
                description: '',
                projects: []//	项目数据
            },
            projects: [
                {
                    projectId: '', // 项目Id
                    budgetAmount: '' // 项目值
                }
            ],
            TypeList: [{ id: 1, name: '年度预算' }, { id: 2, name: '月度预算' }],
            //  表单样式
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 }
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 }
            },
            mode: 'add',
            titleMap: {
                add: '新增预算',
                edit: '更改预算'
            },
            formatTime: 'YYYY-MM-DD',
            headersSource: [],
            dataSource: [], // 初始表格数据
            newdataSource: [], // 改变的表格数据
            newArr: [], // 保存修改的id
            footerFlag: true
        }
    },
    methods: {
        handleChange (value, rowId, itId) {
            this.newdataSource.forEach((item, index) => {
                if (index == rowId) {
                    item.datas.splice(itId, 1, value)
                    // 获取改变元素的项目id
                    const projectId = (this.headersSource || []).findIndex((item) => item.columnId === 'projectId')
                    if (item.datas[projectId] != '') this.newArr.push(item.datas[projectId])
                    this.newArr = Array.from(new Set(this.newArr))
                }
            })
        },
        // 显示
        open (row) {
            this.visible = true
            if (row) {
                this.rowData = row
                detailBudgets(row.budgetId).then(res => {
                    console.log(res)
                    if (res.code == 200) {
                        this.addForm = res.data
                        const sheet = res.data.sheet
                        this.headersSource = sheet.headers
                        this.dataSource = sheet.lines
                        this.newdataSource = sheet.lines
                    }
                })
            }
            return this
        },
        // 关闭
        handleCancel () {
            this.visible = false
            this.loadingBtn = false
            this.visibleBtn = false
            this.$emit('close')
        },
        // 提交
        handleSubmit () {
            const { form: { validateFields } } = this
            const _this = this
            // this.loadingBtn = true;
            // this.visibleBtn = true;
            // 获取项目id 的下标
            const projectId = (this.headersSource || []).findIndex((item) => item.columnId === 'projectId')
            // 获取修改的数据
            const filterArr = this.newdataSource.filter(item => {
                return this.newArr.includes(item.datas[projectId])
            })
            let objectArr = []
            // 获取需要填报的下标
            const budgetAmountId = (this.headersSource || []).findIndex((item) => item.primary === true)
            // let primaryId=this.headersSource.map((item,index) => item.primary==true?index:'').filter(item => item)
            objectArr = filterArr.map(item => {
                const obj = {}
                if (item.datas[budgetAmountId] > 0) {
                    // 获取项目id和项目值
                    obj.projectId = item.datas[projectId]
                    obj.budgetAmount = item.datas[budgetAmountId]
                    return obj
                } else {
                    return ''
                }
            }).filter(item => item)
            if (objectArr.length == 0) {
                this.$notification['error']({
                    message: '提示',
                    description: '请编辑预算项目',
                    duration: 8
                })
                return
            }
            // validateFields((errors, values) => {
            //     if (!errors) {
            //         this.addForm = values
                    // let Api = this.mode == 'add' ? addBudgets : editBudgets
                    // if (this.mode == 'edit') this.addForm.budgetId = this.rowData.budgetId
                    this.addForm.budgetId = this.rowData.budgetId
                    this.addForm.projects = objectArr
                    editBudgets(this.addForm).then(res => {
                        console.log(res)
                        if (res.code === 200) {
                            _this.$notification['success']({
                                message: '提示',
                                description: '保存成功！',
                                duration: 8
                            })
                            _this.visible = false
                            _this.$emit('success')
                        } else {
                            _this.$notification['error']({
                                message: '提示',
                                description: res.message,
                                duration: 8
                            })
                        }
                        _this.visibleBtn = false
                        _this.loadingBtn = false
                    }).finally(res => {
                        _this.loadingBtn = false
                        _this.visibleBtn = false
                    })
                // } else {
                //     this.loadingBtn = false;
                //     this.visibleBtn = false;
                // }
            // })
        }
    }
}
</script>
<style scoped>
.footer {
    background: #666;
    width: 100%;
    height: 60px;
    background: #ffffff;
    display: flex;
    align-items: center;
    padding: 10px;
    border-top: 1px solid #e4ebf0;
    justify-content: flex-end;
    position: absolute;
    bottom: 0px;
    left: 0;
    z-index: 30;
}
.vtable {
    width: 100%;
    height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
}

.thead-th {
    width: 100%;
    padding: 10px;

}

.row-td {
    /* width: 100%;
    padding: 10px;
    border: 1px solid #e8e8e8;
    margin: -5px 0;
    flex: 1; */

    width: 100%;
    height: 100%;
    padding: 10px;
    border: 1px solid #fcfcfc;
    display: flex;
    align-items: center;
    flex: 1;
}

.ant-input-disabled,
.ant-input-number-disabled {
    color: rgba(0, 0, 0, 0.65) !important;
    background: #fcfcfc !important;
    cursor: not-allowed !important;
}
</style>
